import React from 'react'

const Discover: React.FC = () => {
  const categories = [
    {
      id: '1',
      name: 'Bikini',
      image: 'https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGJlYWNofGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
      videoCount: '2.5k',
      isHot: true,
    },
    {
      id: '2',
      name: 'Cosplay',
      image: 'https://images.unsplash.com/photo-1617922001439-4a2e6562f328?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNvc3BsYXl8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
      videoCount: '1.8k',
    },
    {
      id: '3',
      name: 'K-POP Dance',
      image: 'https://images.unsplash.com/photo-1604186838347-b6196998cad9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8a3BvcHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      videoCount: '3.2k',
      isTrending: true,
    },
    {
      id: '4',
      name: 'ASMR',
      image: 'https://images.unsplash.com/photo-1558403194-611308249627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXNtcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      videoCount: '1.5k',
    },
    {
      id: '5',
      name: 'Uniform',
      image: 'https://images.unsplash.com/photo-1611042553484-d61f84d22784?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8dW5pZm9ybXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      videoCount: '2.1k',
    },
    {
      id: '6',
      name: 'Fantasy',
      image: 'https://images.unsplash.com/photo-1578632767115-351597cf2477?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmFudGFzeXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      videoCount: '1.7k',
    },
  ]

  const trendingTags = [
    '#SummerVibes',
    '#KPopDance',
    '#CosplayQueen',
    '#ASMRrelax',
    '#BikiniFashion',
    '#SchoolGirl',
    '#Goddess',
    '#AImodel',
  ]

  const popularCreators = [
    {
      id: '1',
      name: 'Emma_AI',
      avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      tags: 'Bikini, Beach',
    },
    {
      id: '2',
      name: 'K.Dancer',
      avatar: 'https://images.unsplash.com/photo-1586907835000-f692bbd4c9e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8a3BvcHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      tags: 'K-POP, Dance',
    },
    {
      id: '3',
      name: 'Cosplay_AI',
      avatar: 'https://images.unsplash.com/photo-1617922001439-4a2e6562f328?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNvc3BsYXl8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
      tags: 'Cosplay, Fantasy',
    },
  ]

  return (
    <div className="min-h-screen bg-app-dark text-white pb-20">
      {/* App Header */}
      <div className="px-4 pt-2 pb-3 flex items-center">
        <div className="text-xl font-bold">Discover Categories</div>
        <div className="ml-auto">
          <i className="fas fa-search text-xl"></i>
        </div>
      </div>

      {/* Categories */}
      <div className="px-4 py-2">
        <div className="grid grid-cols-2 gap-3">
          {categories.map((category) => (
            <div key={category.id} className="relative rounded-xl overflow-hidden h-40">
              <img
                src={category.image}
                alt={category.name}
                className="w-full h-full object-cover"
              />
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
                <h3 className="font-bold">{category.name}</h3>
                <p className="text-xs text-gray-300">{category.videoCount} videos</p>
              </div>
              {category.isHot && (
                <div className="absolute top-2 right-2 bg-pink-600/80 text-white text-xs font-bold px-2 py-1 rounded-full">
                  HOT
                </div>
              )}
              {category.isTrending && (
                <div className="absolute top-2 right-2 bg-pink-600/80 text-white text-xs font-bold px-2 py-1 rounded-full">
                  TRENDING
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Trending Tags */}
      <div className="px-4 py-4">
        <h3 className="font-bold mb-3">Trending Tags</h3>
        <div className="flex flex-wrap gap-2">
          {trendingTags.map((tag, index) => (
            <span
              key={index}
              className="bg-gray-800 text-white px-3 py-1 rounded-full text-sm"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>

      {/* Popular Creators */}
      <div className="px-4 py-3">
        <h3 className="font-bold mb-3">Popular Creators</h3>
        <div className="space-y-3">
          {popularCreators.map((creator) => (
            <div
              key={creator.id}
              className="flex items-center justify-between"
            >
              <div className="flex items-center">
                <img
                  src={creator.avatar}
                  alt={creator.name}
                  className="w-12 h-12 rounded-full object-cover mr-3"
                />
                <div>
                  <p className="font-semibold">{creator.name}</p>
                  <p className="text-xs text-gray-400">{creator.tags}</p>
                </div>
              </div>
              <button className="bg-pink-600 text-white rounded-full px-4 py-1 text-sm font-semibold">
                Follow
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Discover 